<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="详情" closable>
            <n-space vertical :size="32">
                <n-descriptions label-placement="left" title="基本信息" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="ID">
                        <n-text code>{{ item.id }}</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="员工姓名">{{ item.name }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="员工手机">{{ item.mob }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="员工角色">{{ item.roles.map((role:any) => Filters.userRole(role)).join(" ") }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="负责区域">{{ item.areas.map((area:any) => area.name).join(" ") || '全国' }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="创建时间">{{ item.create }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="现住址">{{ item.addr }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="开户行">{{ item.bank }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="银行卡号">{{ item.card }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="婚姻状况">{{ item.marital }}</n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="劳务合同" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="起止日期" v-if="item.labor.begin">{{ item.labor.begin }} 至 {{ item.labor.close }}</n-descriptions-item>

                    <n-descriptions-item :label-style="labelStyle" label="合同图片" v-if="item.labor.contract">
                        <n-image-group show-toolbar-tooltip>
                            <n-space justify="start" size="large">
                                <n-image width="120" height="120" objectFit="contain" v-if="item.labor.contract" :src="item.labor.contract" />
                            </n-space>
                        </n-image-group>
                    </n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="实名认证" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="认证状态">
                        <n-text v-if="item.idc.state == 0" depth="3">未认证</n-text>
                        <n-text v-if="item.idc.state == 1" type="info">等待审核</n-text>
                        <n-text v-if="item.idc.state == 2" type="success">认证通过</n-text>
                        <n-text v-if="item.idc.state == 3" type="error">认证驳回</n-text>
                        <n-text v-if="item.idc.state == 9" type="warning">认证取消</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="身份证号" v-if="item.idc.idno">{{ item.idc.idno }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="姓名" v-if="item.idc.name">{{ item.idc.name }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="证件效期" v-if="item.idc.indate">{{ item.idc.indate }} 至 {{ item.idc.expire || '长期有效' }}</n-descriptions-item>

                    <n-descriptions-item :label-style="labelStyle" label="证件照片" v-if="item.idc.pica || item.idc.picb">
                        <n-image-group show-toolbar-tooltip>
                            <n-space justify="start" size="large">
                                <n-image width="120" height="90" v-if="item.idc.pica" :src="item.idc.pica" />
                                <n-image width="120" height="90" v-if="item.idc.picb" :src="item.idc.picb" />
                            </n-space>
                        </n-image-group>
                    </n-descriptions-item>
                </n-descriptions>
                <n-descriptions label-placement="left" title="微信绑定" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="是否绑定">
                        <n-text v-if="item.bind.flag" type="error">已绑定微信</n-text>
                        <n-text v-else depth="3">未绑定</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="绑定密码" v-if="item.bind.pwd">{{ item.bind.pwd }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="失效时间" v-if="item.bind.expire">{{ item.bind.expire }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="绑定地址">
                        <div  v-show="item.bind.url" :style="{ width: '280px', height: '280px', margin: '0 auto', padding: '10px' }">
                            <div id="qr" class="qr">
                                <canvas ref="qrRef" id="canvas" :style="{ width: '280px', height: '280px' }"></canvas>
                            </div>
                        </div>
                    </n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="锁定信息" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="是否锁定">
                        <n-text v-if="item.lock.flag" type="error">已锁定登录</n-text>
                        <n-text v-else depth="3">未锁定</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="锁定原因" v-if="item.lock.cause">{{ item.lock.cause }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="锁定时间" v-if="item.lock.time">{{ item.lock.time }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="解锁时间" v-if="item.lock.unlock">{{ item.lock.unlock }}</n-descriptions-item>
                </n-descriptions>

                <n-descriptions label-placement="left" title="最近登录" bordered :column="1">
                    <n-descriptions-item :label-style="labelStyle" label="登录时间">
                        <n-text v-if="item.last.time">{{ item.last.time }}</n-text>
                        <n-text v-else depth="3">未登录</n-text>
                    </n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="登录城市" v-if="item.last.city">{{ item.last.city }}</n-descriptions-item>
                    <n-descriptions-item :label-style="labelStyle" label="登录地址" v-if="item.last.ip">{{ item.last.ip }}</n-descriptions-item>
                </n-descriptions>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref } from 'vue'
import { CloseRound } from '@vicons/material'
import { Filters } from '@/libs'
import { useStore } from '@/store'
import QRCode from 'qrcode'
const qrRef = ref<any>(null)

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const labelStyle = {
    width: '150px',
}

onMounted(async () => {
    if (prop.item.bind.url) {
        await nextTick()
        let canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, prop.item.bind.url, { width: 280, margin: 2 }, error => {
            if (error) console.error(error)
        })
    }
})

const emit = defineEmits(['update:show'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})
</script>
